Animate to height/width auto

Only three lines of code and you have a smooth transition to height: auto

& {
  interpolate-size: allow-keywords;
}
p {
  transition: 1s;
}
p:not(:hover) {
  height: 5lh;
}

The interpolate-size: allow-keywords is doing all the magic. Read Animate to height: auto; (and other intrinsic sizing keywords) in CSS for more detail.


Discover more from MountAviary

Subscribe to get the latest posts sent to your email.

Leave a Reply

Your email address will not be published. Required fields are marked *